import { Component, EventEmitter, Injector, Output, ViewChild } from '@angular/core';
import { CreateFrontendPageDto, FrontendPageDto, FrontendPageServiceProxy, NameValue, UpdateFrontendPageDto } from '@shared/service-proxies/service-proxies';
import { ModalDirective } from 'ngx-bootstrap/modal';
import { finalize } from 'rxjs/operators';
import { AppModalComponentBase } from '@shared/common/app-modal-component-base';

@Component({
    selector: 'create-or-edit-page-modal',
    templateUrl: './create-or-edit-page-modal.component.html'
})
export class CreateOrEditPageModalComponent extends AppModalComponentBase {
    @ViewChild('modal', { static: true }) modal: ModalDirective;
    @Output() callback: EventEmitter<any> = new EventEmitter<any>();

    saving = false;
    loading = false;

    title: string = '';

    selectedValue: string ='';
    options: NameValue[] = [];
    idList: string[] = [];

    data:FrontendPageDto;

    detailPages:NameValue[] = [];
    backendPageList:NameValue[] = [];

    constructor(
        injector: Injector,
        private _frontendPageService: FrontendPageServiceProxy
    ) {
        super(injector);
        this.data = new FrontendPageDto();
    }


    show(backEndModuleId: string, frontendPageId: string,  backendPageList:NameValue[]) {
        this.modal.show();
        this.backendPageList = backendPageList;

        this.loading = true;
        this.data = new FrontendPageDto();
        this._frontendPageService.getForEdit(backEndModuleId,frontendPageId)
        .pipe(finalize(() => this.loading = false))
        .subscribe(result=> {
            this.detailPages = result.detailPages;

            if (result.frontendPage) {
                this.data = result.frontendPage;
                this.title = result.frontendPage.name;
                this.title += '(' + this.data.id + ')';
            } else {
                this.title = this.l("CreateNew");
                this.data.backEndModuleId = backEndModuleId;
            }
            

            if (!this.data.target) {
                this.data.target = '#';
            }
            if (!this.data.detailPageId) {
                this.data.detailPageId = '#';
            }
        });
    }

    close(): void {
        this.modal.hide();
    }

    save() {
        if (this.data.target === '#') {
            this.data.target = null;
        }
        if (this.data.detailPageId === '#') {
            this.data.detailPageId = null;
        }

        if (this.data.id) {
            this.saving = true;
            let input : UpdateFrontendPageDto = new UpdateFrontendPageDto({
                id: this.data.id,
                lastModificationTime : this.data.lastModificationTime,
                name: this.data.name,
                description: this.data.description,
                backEndModuleId: this.data.backEndModuleId,
                controllerName: this.data.controllerName,
                actionName: this.data.actionName,
                url: this.data.url,
                target:this.data.target,
                isActive:this.data.isActive,
                order: this.data.order,
                isDetailPage: this.data.isDetailPage,
                isDefault: this.data.isDefault,
                detailPageId: this.data.detailPageId
            });
            this._frontendPageService.update(input)
            .pipe(finalize(() => this.saving = false))
            .subscribe(result=> {
                this.notify.success(this.l('SavedSuccessfully'));
                this.callback.emit();
                this.close();
            });
        }else{
            this.saving = true;
            let input : CreateFrontendPageDto= new CreateFrontendPageDto({
                name: this.data.name,
                description: this.data.description,
                backEndModuleId: this.data.backEndModuleId,
                controllerName: this.data.controllerName,
                actionName: this.data.actionName,
                url: this.data.url,
                target:this.data.target,
                isActive:this.data.isActive,
                order: this.data.order,
                isDetailPage: this.data.isDetailPage,
                isDefault: this.data.isDefault,
                detailPageId: this.data.detailPageId
            });
           
            this._frontendPageService.create(input)
            .pipe(finalize(() => this.saving = false))
            .subscribe(result=> {
                this.notify.success(this.l('SavedSuccessfully'));
                this.callback.emit();
                this.close();
            });
        }
    }
}
